<template>
  <div class="main">
    <div class="title">
      在线充值
    </div>
    <div>
      <div class="recharge">
        <div class="reminder">
          温馨提示：发布违法违规稿件会直接封号不退款,并提交公安机关报警处理!
        </div>
        <div class="mode">
          <div class="choice">
            <span>充值方式：</span>
            <span class="choice_img">
              <i></i>
            </span>
            <!-- <span class="choice_img choice_img2">
              <i></i>
            </span> -->
          </div>
          <div class="pay">
            <span>充值金额：</span>
            <div>
              <el-radio v-model="radio2" label="1" border size="medium">500</el-radio>
              <el-radio v-model="radio2" label="2" border size="medium">1000</el-radio>
              <el-radio v-model="radio2" label="3" border size="medium">2000</el-radio>
              <el-radio v-model="radio2" label="4" border size="medium">5000</el-radio>
              <el-radio v-model="radio2" label="5" border size="medium">自定义</el-radio>

            </div>
            <div class="pay_input" >
              <el-input v-model="input" :disabled="radio2 != 5" placeholder="请输入金额"></el-input>
            </div>
          </div>
        </div>
        <div class="reminder reminder2">
          因平台上不断有违规用户注册充值少量金额，严重扰乱我公司健康长期发展战略， 今日起，本平台限定最低充值金额100元，敬请谅解！
        </div>
        <div class="pay_div">
          <el-button type="primary" class="pay_btn">确认充值</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
         radio2: '1',
         input:''
      };
    }
  }
</script>

<style lang="scss" scoped>
.main{
  min-height: 755px;
}
.title {
    color: #F37B1D;
    font-weight: 700;
    padding-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px #dedede solid;
}
.recharge{
  margin: 17px;
  .reminder{
    color: #ff0000;
    font-size: 14px;
  }
  .mode{
    margin-top: 15px;
  }
}
.reminder2{
  clear: both;
  position: relative;
  top: 26px;
  left: 5px;
  width: 625px;
  line-height: 26px;
}
.choice{
  height: 115px;
  color: #8a8a8a;
  .choice_img{
    background: url('../../assets/pay_style.png') no-repeat 38px 1px;
    display: inline-block;
    height: 58px;
    width: 198px;
    margin-right: 38px;
    border-radius: 4px;
    border:1px solid #f84632;
    position: relative;
    cursor: pointer;
    top: 21px;
      left: 15px;
    i{
      position: absolute;
      bottom: 0;
      right: 0;
      width: 26px;
      height: 24px;
      background: url('../../assets/pay_style.png') no-repeat -122px -140px;
    }
  }
  .choice_img2{
    background: url('../../assets/pay_style.png') no-repeat 38px -56px;
  }
}
.pay{
    color: #8a8a8a;
    span{
      float:left;
      margin-top: 5px;
    }
    div{
      float: left;
      margin-left: 15px;
      /deep/.el-radio__input.is-checked .el-radio__inner {
          border-color: #f84632;
          background: #f84632;
      }
      .el-radio.is-bordered.is-checked {
          border-color: #f84632;
      }
      /deep/.el-radio__input.is-checked+.el-radio__label {
          color: #f84632;
      }
      .el-radio.is-bordered+.el-radio.is-bordered{
        margin-left: -6px;
      }
    }
    .pay_input{
      clear: both;
      margin-left: 80px;
      margin-top: 21px;
      width: 195px;
    }
}
.pay_btn{
  margin-top: 47px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
.pay_div{
  width: 630px;
}

</style>
